<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>迷你直播</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<link rel="stylesheet " type="text/css " href="css/globle.css " />
		<link rel="stylesheet " type="text/css " href="css/style.css " />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<script src='js/jquery.js'></script>
		<script src='js/index.js'></script>
		<script src="js/timeline.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body class="border-box-group">
		<!-- 顶部 -->
		<header class="header clearfix">
			<div class="logo"><img src="images/mn.png"></div>
			<div class="category-btn">
				<a href="javascript:;">分类</a>
			</div>
			<!-- 分类 -->
			<div class="category" style="display: none;">
				<div class="category-nav ">
					<div class="swiper-container2">
						<div class="swiper-wrapper">
							<div class="swiper-slide active"><a href="javascript:;">全部</a></div>
							<div class="swiper-slide"><a href="javascript:;">热门视频</a></div>
							<div class="swiper-slide"><a href="javascript:;">边看边聊</a></div>
							<div class="swiper-slide"><a href="javascript:;">全民参与</a></div>
							<div class="swiper-slide"><a href="javascript:;">节目预告</a></div>
							<div class="swiper-slide"><a href="javascript:;">精彩瞬间</a></div>
							<div class="swiper-slide"><a href="javascript:;">直播</a></div>
							<div class="swiper-slide"><a href="javascript:;">点播</a></div>
						</div>

					</div>
				</div>

				<div class="category-content clearfix">
					<dl>
						<a href="#">
							<dt>
              <img src="images/001.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/002.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/003.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/004.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/005.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/006.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/001.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/002.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/003.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/004.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/005.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

					<dl>
						<a href="#">
							<dt>
              <img src="images/006.jpg">
            </dt>
							<dd>园艺空间</dd>
						</a>
					</dl>

				</div>
			</div>
		</header>
		<!-- banner -->
		<div class="banner">
			<video src="images/dididi.mp4" controls="controls">
         
            </video>
		</div>

		<section class="list">
			<ul>
				<li class="list-active list1">互动聊天</li>
				<li class="list2">图文详情</li>
				<li class="list3">精彩回顾</li>
			</ul>

			<div class="talk">
				<div class="talk-0">
					<div class="talk-left">
						<span class="talk-1"><img src="images/img01.jpg"/></span>
						<span class="talk-2">Cendy</span>
						<span class="talk-3">今晚的盛会很赞！今晚的盛会很赞！</span>
					</div>
					<span class="talk-right">2017-05-09</span>
				</div>

				<div class="talk-0">
					<div class="talk-left">
						<span class="talk-1"><img src="images/img02.jpg"/></span>
						<span class="talk-2">Cendy</span>
						<span class="talk-3">今晚的盛会很赞！今晚的盛会很赞！</span>
					</div>
					<span class="talk-right">2017-05-09</span>
				</div>
				<div class="talk-0">
					<div class="talk-left">
						<span class="talk-1"><img src="images/004.jpg"/></span>
						<span class="talk-2">Cendy</span>
						<span class="talk-3">今晚的盛会很赞！今晚的盛会很赞！</span>
					</div>
					<span class="talk-right">2017-05-09</span>
				</div>
				<div class="talk-0">
					<div class="talk-left">
						<span class="talk-1"><img src="images/003.jpg"/></span>
						<span class="talk-2">Cendy</span>
						<span class="talk-3">今晚的盛会很赞！今晚的盛会很赞！</span>
					</div>
					<span class="talk-right">2017-05-09</span>
				</div>

				<div class="talk-0">
					<div class="talk-left">
						<span class="talk-1"><img src="images/img01.jpg"/></span>
						<span class="talk-2">Cendy</span>
						<span class="talk-3">今晚的盛会很赞！今晚的盛会很赞！</span>
					</div>
					<span class="talk-right">2017-05-09</span>
				</div>

				<div class="talk-0">
					<div class="talk-left">
						<span class="talk-1"><img src="images/img01.jpg"/></span>
						<span class="talk-2">Cendy</span>
						<span class="talk-3">今晚的盛会很赞！今晚的盛会很赞！</span>
					</div>
					<span class="talk-right">2017-05-09</span>
				</div>

				<div class="talk-0">
					<div class="talk-left">
						<span class="talk-1"><img src="images/img01.jpg"/></span>
						<span class="talk-2">Cendy</span>
						<span class="talk-3">今晚的盛会很赞！今晚的盛会很赞！</span>
					</div>
					<span class="talk-right">2017-05-09</span>
				</div>

				<div class="talk-0">
					<div class="talk-left">
						<span class="talk-1"><img src="images/img01.jpg"/></span>
						<span class="talk-2">Cendy</span>
						<span class="talk-3">今晚的盛会很赞！今晚的盛会很赞！</span>
					</div>
					<span class="talk-right">2017-05-09</span>
				</div>

				<form action="">
					<input type="text" class="form-control" name="" id="" value="" />
					<div>发送</div>
				</form>

			</div>

			<div class="info">
				<span class="info-1">直播主题：<span>远&nbsp;方</span></span>
				<div class="zj">
					<span class="info-2">主讲：xxx</span>
					<span class="info-3">嘉宾：xxx</span>
				</div>
				<span class="info-5">时间表:</span>
				<span class="info-4"><img src="images/timg.jpg"/></span>
			</div>
		</section>
		
		
		<!--时间轴-->
		<div class="container">
			<ul id="timeline" class="timeline">
				<li>
					<div class="check">
						<b class="spring"></b>
						<s></s>
						<b class="line"></b>
					</div>
					<div class="thumb">
						<img src="images/pic/top5.jpg" />
						<span>7:00</span>
					</div>
					<div class="content">
						<b></b>
						<h3>气候和人类的生活息息相关，同时人类的活动也会对气候造成影响</h3>
						<p>恶劣的气候现象给人类带来不便甚至灾难，对人类出行产生影响。譬如强令空气南下会带来寒潮，随之伴有大风、雨雪等天气，对人类活动实为不便。</p>
					</div>
				</li>
				<li>
					<div class="check">
						<b class="spring"></b>
						<s></s>
						<b class="line"></b>
					</div>
					<div class="thumb">
						<img src="images/001.jpg" />
						<span>8:00</span>
					</div>
					<div class="content">
						<b></b>
						<h3>气候和人类的生活息息相关，同时人类的活动也会对气候造成影响</h3>
						<p>恶劣的气候现象给人类带来不便甚至灾难，对人类出行产生影响。譬如强令空气南下会带来寒潮，随之伴有大风、雨雪等天气，对人类活动实为不便。</p>
					</div>
				</li>
				<li>
					<div class="check">
						<b class="spring"></b>
						<s></s>
						<b class="line"></b>
					</div>
					<div class="thumb">
						<img src="images/003.jpg" />
						<span>19:30</span>
					</div>
					<div class="content">
						<b></b>
						<h3>气候和人类的生活息息相关，同时人类的活动也会对气候造成影响</h3>
						<p>恶劣的气候现象给人类带来不便甚至灾难，对人类出行产生影响。譬如强令空气南下会带来寒潮，随之伴有大风、雨雪等天气，对人类活动实为不便。</p>
					</div>
				</li>
				<li>
					<div class="check">
						<b class="spring"></b>
						<s></s>
						<b class="line"></b>
					</div>
					<div class="thumb">
						<img src="images/005.jpg" />
						<span>20:00</span>
					</div>
					<div class="content">
						<b></b>
						<h3>气候和人类的生活息息相关，同时人类的活动也会对气候造成影响</h3>
						<p>恶劣的气候现象给人类带来不便甚至灾难，对人类出行产生影响。譬如强令空气南下会带来寒潮，随之伴有大风、雨雪等天气，对人类活动实为不便。</p>
					</div>
				</li>
				<li>
					<div class="check">
						<b class="spring"></b>
						<s></s>
						<b class="line"></b>
					</div>
					<div class="thumb">
						<img src="images/006.jpg" />
						<span>21:05</span>
					</div>
					<div class="content">
						<b></b>
						<h3>气候和人类的生活息息相关，同时人类的活动也会对气候造成影响</h3>
						<p>恶劣的气候现象给人类带来不便甚至灾难，对人类出行产生影响。譬如强令空气南下会带来寒潮，随之伴有大风、雨雪等天气，对人类活动实为不便。</p>
					</div>
				</li>
				<li>
					<div class="check">
						<b class="spring"></b>
						<s></s>
						<b class="line"></b>
					</div>
					<div class="thumb">
						<img src="images/pic/top3.jpg" />
						<span>22:10</span>
					</div>
					<div class="content">
						<b></b>
						<h3>2014年3月24日晚10点，马来西亚总理纳吉布在吉隆坡宣布，马航失联飞机在南印度洋坠毁</h3>
						<p>在失踪了500多个昼夜之后，MH370航班的残骸首次被发现。</p>
					</div>
				</li>
				<li>
					<div class="check">
						<b class="spring"></b>
						<s></s>
						<b class="line"></b>
					</div>
					<div class="thumb">
						<img src="images/pic/top1.jpg" />
						<span>23:00</span>
					</div>
					<div class="content">
						<b></b>
						<h3>2014年3月24日晚10点，马来西亚总理纳吉布在吉隆坡宣布，马航失联飞机在南印度洋坠毁</h3>
						<p>在失踪了500多个昼夜之后，MH370航班的残骸首次被发现。</p>
					</div>
				</li>
			</ul>
		</div>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		<!-- 直播列表 -->
		<div class="live">
			<div class="live-nav">
				<h2 class="h2-title">热门直播</h2>
				<a href="#" class="update">换一换</a>
			</div>
			<div class="live-list">
				<ul class="clearfix">
					<li>
						<p class="pimg">
							<a href="#"><img src="images/004.jpg" /></a>
						</p>
						<p class="ptext"><a href="#">沁人心脾,色彩斑斓，五彩缤纷</a></p>
					</li>

					<li>
						<p class="pimg">
							<a href="#"><img src="images/005.jpg" /></a>
						</p>
						<p class="ptext"><a href="#">沁人心脾,色彩斑斓，五彩缤纷</a></p>
					</li>

					<li>
						<p class="pimg">
							<a href="#"><img src="images/003.jpg" /></a>
						</p>
						<p class="ptext"><a href="#">沁人心脾,色彩斑斓，五彩缤纷</a></p>
					</li>

					<li>
						<p class="pimg">
							<a href="#"><img src="images/001.jpg" /></a>
						</p>
						<p class="ptext"><a href="#">沁人心脾,色彩斑斓，五彩缤纷</a></p>
					</li>

					<li>
						<p class="pimg">
							<a href="#"><img src="images/004.jpg" /></a>
						</p>
						<p class="ptext"><a href="#">沁人心脾,色彩斑斓，五彩缤纷</a></p>
					</li>

					<li>
						<p class="pimg">
							<a href="#"><img src="images/005.jpg" /></a>
						</p>
						<p class="ptext"><a href="#">沁人心脾,色彩斑斓，五彩缤纷</a></p>
					</li>

					<li>
						<p class="pimg">
							<a href="#"><img src="images/003.jpg" /></a>
						</p>
						<p class="ptext"><a href="#">沁人心脾,色彩斑斓，五彩缤纷</a></p>
					</li>

					<li>
						<p class="pimg">
							<a href="#"><img src="images/001.jpg" /></a>
						</p>
						<p class="ptext"><a href="#">沁人心脾,色彩斑斓，五彩缤纷</a></p>
					</li>

				</ul>
			</div>
		</div>

		<footer>
			<div>
				<span>首页</span>
				<span>活动</span>
				<span>相关</span>
				<span>预告</span>
			</div>
		</footer>

	</body>

</html>